<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Insert title here</title>
        <script type="text/javascript" src="javascript/ext-3.2.1/adapter/ext/ext-base.js">
        </script>
        <script type="text/javascript" src="javascript/ext-3.2.1/ext-all.js">
        </script>
        <link rel="stylesheet" type="text/css" href="javascript/ext-3.2.1/resources/css/ext-all.css" />
    </head>
    <body>
        <div id="grid-example">
        </div>
        <script type="text/javascript">
            Ext.onReady(function(){
            
                var store = new Ext.data.JsonStore({
                    url: 'testAction.action?method=test',
                    root: 'gridData',
                    totalProperty: 'totalCount',
                    fields: ['fdrFileName', 'vpmn', 'startDate', 'endDate', 'nrtFileName', 'nrtFileReceivedDate', 'recordNumber'],
                    remoteSort: true,
                    idProperty: 'threadid',
                    autoLoad: {
                        params: {
                            start: 0,
                            limit: 2
                        }
                    }
                });
                
                var grid = new Ext.grid.GridPanel({
                    store: store,
                    renderTo: 'grid-example',
                    columns: [{
                        id: 'fdrFileName',
                        header: 'ERROR_FILE_NAME',
                        width: 225,
                        sortable: false,
                        dataIndex: 'fdrFileName'
                    }, {
                        id: 'vpmn',
                        header: 'VPMN',
                        width: 67,
                        sortable: false,
                        dataIndex: 'vpmn'
                    }, {
                        id: 'startDate',
                        header: 'START_DATE',
                        width: 172,
                        sortable: false,
                        dataIndex: 'startDate'
                    }, {
                        id: 'endDate',
                        header: 'END_DATE',
                        width: 172,
                        sortable: false,
                        dataIndex: 'endDate'
                    }, {
                        id: 'nrtFileName',
                        header: 'NRT_FILE_NAME',
                        width: 195,
                        sortable: false,
                        dataIndex: 'nrtFileName'
                    }, {
                        id: 'nrtFileReceivedDate',
                        header: 'NRT_FILE_RECEIVED_DATE',
                        width: 200,
                        sortable: false,
                        dataIndex: 'nrtFileReceivedDate'
                    }, {
                        id: 'recordNumber',
                        header: 'RECORD_NUMBER',
                        width: 126,
                        sortable: false,
                        dataIndex: 'recordNumber'
                    }],
                    stripeRows: true,
                    autoExpandColumn: 'fdrFileName',
                    height: 350,
                    width: 1200,
                    // config options for stateful behavior
                    stateful: true,
                    stateId: 'grid',
                    bbar: new Ext.PagingToolbar({
                        store: store,
                        pageSize: 20,
                        displayInfo: true,
                        displayMsg: 'Displaying topics {0} - {1} of {2}'
                    })
                });
            });
        </script>
    </body>
</html>
